<!--
 * @Descripttion: 
 * @version: 
 * @Author: kk
 * @Date: 2020-10-23 12:21:40
 * @LastEditors: kk
 * @LastEditTime: 2020-10-23 19:49:11
-->
<!--  -->
<template>
  <div>
    <div class="Center">
      <el-form
        :inline="true"
        :model="itemQuery "
        class="demo-form-inline"
      >
        <el-form-item label="商品名称">
          <el-input
            v-model="itemQuery.name"
            placeholder="name"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品码">
          <el-input
            v-model="itemQuery.code"
            placeholder="code"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="onSubmit"
          >查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table
      class="ItemTable"
      :data="items"
      border
      style="width: 95%"
    >
      <el-table-column
        prop="id"
        label="ID"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="商品名称"
      >
      </el-table-column>
      <el-table-column
        prop="code"
        label="商品码"
      >
      </el-table-column>
      <el-table-column
        prop="stock"
        label="库存"
      >
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
      >
        <template slot-scope="scope">
          <router-link :to="'/item/edit/'+scope.row.id">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              style="margin-right: 20px;"
            >编辑商品</el-button>
          </router-link>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="open(scope.row.id)"
          >删除商品</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <!-- 分页 -->
      <el-pagination
        :current-page="page"
        :page-size="limit"
        :total="total"
        style="padding: 30px 0; text-align: center;"
        layout="total, prev, pager, next, jumper"
        @current-change="getItemList"
      />
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import item from "@/api/item";
import router from "@/router";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},

  data() {
    return {
      items: [
        {
          id: "1",
          name: "耳机",
          code: "10086",
          stock: "1000",
        },
      ],
      page: 1,
      total: 100,
      limit: 10,
      itemQuery: {},
    };
  },

  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //分页查询商品列表
    onSubmit() {
        this.getItemList()
    },
    getItemList(page = 1) {
      //默认为1
      this.page = page;
      item
        .getItemList(this.page, this.limit, this.itemQuery)
        .then((reponse) => {
          //请求成功
          //console.log(reponse);
          const res = reponse.data;
          this.items = res.items;
          this.total = res.total;
        });
    },
    removeItemById(id) {
      //console.log(id);
      item.removeItem(id).then((response) => {
        if (response.code == 200) {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          //刷新
          this.getItemList(this.page);
        }
      });
    },
    open(id) {
      this.$confirm("此操作将永久删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.removeItemById(id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getItemList();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.ItemTable {
  margin-left: 20px;
  margin-top: 20px;
}
.Center{
    // margin: 0 auto;
    // margin-top: 20px;
    padding: 30px 0; 
    text-align: center;
    //align-content: center;
}
</style>